<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>歌与歌词</title>
    <link rel="stylesheet" href="../libs/pico.min.css">
    <style type="text/css">
        body {
            margin: 0;
            background-color: #acacac;
        }
    </style>
</head>
<body>
    <main id="main" class="container">
        <article data-theme="light" style="text-align: center;">
            <h1>姐弟的战争</h1>
            <div class="lyrics-container"> <div id="lyrics"></div></div>
            <audio id="audio-player" src="../rec/sound/yzlyzndj-AI.mp3" controls preload autoplay></audio>
        </article>
    </main>
    <main id="main" class="container">
        <article data-theme="light" style="text-align: center;">
            <h1>弟弟快写作业</h1>
            <div class="lyrics-container"> <div id="lyrics2"></div></div>
            <audio id="audio-player2" src="../rec/sound/yzlxzy-AI.mp3" controls></audio>
        </article>
    </main>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var audio = document.getElementById('audio-player');
        var lyricsContainer = document.getElementById('lyrics');

        // 歌词内容与时间
        var lyrics = [
            { time: 0, text: "下午时光。" },
            { time: 1, text: "尹子乐，尹紫恩。" },
            { time: 3, text: "在角落里，开始了他们的战争。" },
            { time: 6, text: "拳头挥舞，脚步挪动。" },
            { time: 8, text: "谁也不让谁，气氛紧张。" },
            { time: 11, text: "尹子乐，力量强大。" },
            { time: 13, text: "尹紫恩，技巧高超。" },
            { time: 15, text: "他们相互攻击，毫不留情。" },
            { time: 18, text: "这场战斗，谁会是胜者。" },
            { time: 21, text: "没有输赢，只有疲惫和伤害。" },
            { time: 26, text: "他们停下手，望着对方。" },
            { time: 28, text: "是否明白，打架并不是答案。" },
            { time: 31, text: "和平相处，才是最好的方式。" },
            { time: 42, text: "才是最好的方式。" },
            // 歌词时间和文本继续添加
        ];
        // 更新歌词
        function updateLyrics(currentTime) {
            for (var i = 0; i < lyrics.length; i++) {
                if (currentTime >= lyrics[i].time && (!lyrics[i + 1] || currentTime < lyrics[i + 1].time)) {
                    lyricsContainer.innerText = lyrics[i].text;
                    break;
                }
            }
        }

        // 监听频播放时间更新事件
        audio.addEventListener('timeupdate', function() {
            var currentTime = audio.currentTime;
            updateLyrics(currentTime);
        });
        addNext();
    });
    function addNext(){
        var audio = document.getElementById('audio-player2');
        var lyricsContainer = document.getElementById('lyrics2');

        // 歌词内容与时间
        var lyrics = [
            { time: 0, text: "尹子乐，快写作业。" },
            { time: 2, text: "不要再拖延，时间很宝贵。" },
            { time: 5, text: "看看姐姐尹紫恩。" },
            { time: 7, text: "早早就把作业完。" },
            { time: 9, text: "写作业，要认真。" },
            { time: 11, text: "知识才能进头脑。" },
            { time: 14, text: "不要贪玩，不要分心。" },
            { time: 16, text: "未来的路还很长。" },
            { time: 23, text: "尹子乐，快加油。" },
            { time: 25, text: "努力学习，成绩会更好。" },
            { time: 28, text: "相信自己，你能行。" },
            { time: 30, text: "姐姐紫恩在你身旁。" },
            { time: 33, text: "快快拿起笔。" },
            { time: 35, text: "作业不再怕。" },
            { time: 39, text: "尹子乐，你最棒。" },
            { time: 41, text: "一起向前冲！" },
            { time: 43, text: "尹子乐，快写作业，不要再拖延，时间很宝贵。" },
            { time: 48, text: "看看姐姐尹紫恩，早早就把作业完。" },
            { time: 52, text: "写作业，要认真，知识才能进头脑。" },
            { time: 56, text: "不要贪玩，不要分心，未来的路还很长。" },
            { time: 65, text: "尹子乐，快加油，努力学习，成绩会更好。" },
            { time: 69, text: "相信自己，你能行，姐姐紫恩在你身旁。" },
            { time: 75, text: "快快拿起笔，作业不再怕。" },
            { time: 80, text: "尹子乐，你最棒，一起向前冲 。" },
            // 歌词时间和文本继续添加
        ];
        // 更新歌词
        function updateLyrics(currentTime) {
            for (var i = 0; i < lyrics.length; i++) {
                if (currentTime >= lyrics[i].time && (!lyrics[i + 1] || currentTime < lyrics[i + 1].time)) {
                    lyricsContainer.innerText = lyrics[i].text;
                    break;
                }
            }
        }
        // 监听频播放时间更新事件
        audio.addEventListener('timeupdate', function() {
            var currentTime = audio.currentTime;
            updateLyrics(currentTime);
        });
    }
</script>
</body>

</html>
